<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>模糊查询</title>
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="col-lg-6" style="margin:20px">
            <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
            </span>
            <input type="text" v-model="text" class="form-control" placeholder="请输入名字搜索...">
            </div>
        </div>
   
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,i) in searchResult" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.hobby}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm = new Vue({
        el:'.container',
        data:{
          text:'',
          info: [{
            name: '雷森',
            sex: '男',
           hobby: '打篮球',
            age: '18'
          },{
            name: '刘伟',
            sex: '男',
           hobby: '旅游',
            age: '24'
          },{
            name: '刘微',
            sex: '女',
           hobby: '旅游',
            age: '24'
          }, {
           name: '胡汉三',
            sex: '男',
           hobby: '美食',
            age: '30'
          }, {
           name: '张艺',
            sex: '女',
           hobby: '看韩剧',
            age: '24'
          }, {
            name: '欧阳',
            sex: '女',
           hobby: '环游世界',
            age: '25'
          }]
        },
        computed:{
          searchResult() {
                  if (this.text) {
                  console.log(this.info)
                  return this.info.filter(
                      item =>
                      item.name.indexOf(this.text) > -1 ||
                      item.hobby.indexOf(this.ipt) > -1
                  );
                  } else {
                  return this.info;
                  }
              }
          }
    })  

</script> 
</body>

</html>
